<template>
    <div class="home">

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <!--<van-swipe-item><img style="width: 100%;" src="/static/picture/e3763JC3V4ebrvE.png" alt=""></van-swipe-item>-->
            <van-swipe-item><img style="width: 100%;" src="/static/picture/lunbo/1.png" alt=""></van-swipe-item>
            <van-swipe-item><img style="width: 100%;" src="/static/picture/lunbo/2.png" alt=""></van-swipe-item>
            <van-swipe-item><img style="width: 100%;" src="/static/picture/lunbo/3.png" alt=""></van-swipe-item>
            <van-swipe-item><img style="width: 100%;" src="/static/picture/lunbo/4.png" alt=""></van-swipe-item>
            <van-swipe-item><img style="width: 100%;" src="/static/picture/lunbo/5.png" alt=""></van-swipe-item>
        </van-swipe>
        <div class="pc-tips">
            <van-notice-bar >
                电脑端地址：{{pc_url}}
                <template #right-icon>
<!--                    <van-icon name="search" size="18" />-->
<!--                    <van-icon size="18px" name="/static/images/ico_copy@2x.png" @click="copy(pc_url)"/>-->
                    <span size="18px"  @click="copy(pc_url)">复制网址</span>
                </template>
            </van-notice-bar>
        </div>
        <div class="chanenl-recommend">
            <van-grid :column-num="4" square>
                <template v-for="(item,index) in classifies">
                    <template v-if=""></template>
                    <van-grid-item v-if="index<14" is-link :to="'/list/'+item.id" :icon="iconList[index]"
                                   :text="item.name"/>
                    <van-grid-item v-if="index==14" is-link to="/channel" :icon="iconList[14]"
                                   text="更多"/>
                </template>
            </van-grid>
        </div>
        <div class="notice">
<!--            <van-notice-bar-->
<!--                    left-icon="volume-o"-->
<!--                    text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"-->
<!--            />-->

            <van-notice-bar left-icon="volume-o" >
                <van-swipe
                        vertical
                        class="notice-swipe"
                        :autoplay="3000"
                        :show-indicators="false"
                >
                    <van-swipe-item v-for="(item,index) in notice" :key="index">{{item}}</van-swipe-item>

                </van-swipe>
            </van-notice-bar>
        </div>
<!--        <div class="tips-box">-->
<!--            <van-cell-group title="" class="van-hairline&#45;&#45;surround">-->
<!--                <van-cell>-->
<!--                    <template #default>-->
<!--                        <div class="tips-box-con">-->
<!--                            <b>今日上新</b>-->
<!--                            已更新-->
<!--                            <span class="active">23</span>-->
<!--                            <span> 份内容，每天都有新内容！</span>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </van-cell>-->
<!--                <van-cell>-->
<!--                    <template #default>-->
<!--                        <div class="tips-box-con">-->
<!--                            <b>平台总汇</b>-->
<!--                            共有-->
<!--                            <span class="active">318157</span>-->
<!--                            <span> 份公文，供您参阅学习!</span>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </van-cell>-->
<!--            </van-cell-group>-->
<!--        </div>-->
        <div class="list-box">
            <van-cell-group title="" class="van-hairline--surround">

                <van-cell is-link to="/list/38" value="更多">
                    <template #title>
                        <b>今日更新</b>
                    </template>
                </van-cell>

                <template v-for="(item,index) in records">
                    <van-cell :to="'/detail/'+item.id">
                        <template #default>
                            <div class="item-box">
                                <div class="img">
                                    <img :src="$utils.getIconImg(item.type)" alt="">
<!--                                    <i :style="'color:'+$utils.getIconColor('docx')"-->
<!--                                                    :class="'far '+$utils.getIcon('docx')"></i>-->
                                </div>
                                <div class="item-con">
                                    <div class="item-title van-ellipsis">{{item.title}}</div>
                                    <div class="item-des van-ellipsis">{{item.title}}</div>
                                    <div class="item-nums">
                                        <span><van-icon name="underway-o"/>  {{item['human_time']}}</span>
                                        <span><van-icon name="eye-o"/> {{item['see_num']}}</span>
                                        <span><van-icon name="down"/> {{item['download_num']}}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </van-cell>
                </template>
            </van-cell-group>
        </div>


    </div>
</template>
<script>

</script>
<script>


    import wx from "weixin-js-sdk"
    export default {
        name: "HomeView",
        components: {},
        data() {
            return {
                iconList:[
                    "/static/images/1.png",
                    "/static/images/2.png",
                    "/static/images/3.png",
                    "/static/images/4.png",
                    "/static/images/5.png",
                    "/static/images/6.png",
                    "/static/images/7.png",
                    "/static/images/8.png",
                    "/static/images/9.png",
                    "/static/images/10.png",
                    "/static/images/11.png",
                    "/static/images/12.png",
                    "/static/images/13.png",
                    "/static/images/14.png",
                    "/static/images/15.png"
                ],
                classifies: [],
                hotWords: [],
                recommend: [],
                records: [],
                notice:[],
                seeRank: [],
                total: 0,
                keyword: '',
                pc_url:'ctb.lyxinxiangyi.cn'
            };
        },
        created() {
            this.$apis.getDataList({isToday:this.isToday,pageSize:90}).then(lstres=>{
              //console.log(lstres.records)
              // this.SetHomeDataRecords(lstres.records)
              this.records=lstres.records;
            })
            this.$apis.homeData().then(res => {
                this.classifies = res.classifies;
                this.hotWords = res.hotWords;
                this.recommend = res.recommend;
                // this.records = res.records;
                this.seeRank = res.seeRank;
                this.notice=res.notice;
                this.total = res.total;
                this.wxShareInit();
            })
        },
        methods: {
            copy(pc_url){
                var input = document.createElement("input");
                input.value = pc_url;
                document.body.appendChild(input);
                input.select();
                document.execCommand("Copy");
                document.body.removeChild(input);

                this.$toast('复制成功')
            },
            search() {
                if (!this.keyword) {
                    this.$message({
                        message: '请输入搜索关键词',
                        type: 'warning',
                        offset: 0
                    });
                    return;
                }
                let routeUrl = this.$router.resolve({path: `/search/${this.keyword}`})
                window.open(routeUrl.href, "_blank");
            },
            wxShareInit(){
                let curUrl=this.$utils.removeQueryParam(window.location.href,'pid');
                curUrl=this.$utils.removeQueryParam(curUrl,'code')
                curUrl=this.$utils.removeQueryParam(curUrl,'state')

                if(this.$store.getters.userInfo){
                    curUrl=curUrl;
                    // curUrl=curUrl+"?pid="+this.$store.getters.userInfo.union_id;
                }
                let shareUrl=curUrl;
                //
                // this.$toast(shareUrl)
                // console.log(shareUrl)
                let params={
                    url:shareUrl
                }
                this.$apis.wxConfig(params).then(res => {
                    let wxConfig=JSON.parse(res.records.wxConfig);
                    let title="池塘边素材网"
                    let icon=this.$config.host+'/static/images/logo.jpg';
                    let shareUrl=wxConfig.url;
                    console.log(shareUrl)
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
                        appId: wxConfig.appId, // 必填，公众号的唯一标识
                        timestamp:wxConfig.timestamp, // 必填，生成签名的时间戳
                        nonceStr: wxConfig.nonceStr, // 必填，生成签名的随机串
                        signature: wxConfig.signature,// 必填，签名
                        jsApiList:wxConfig.jsApiList // 必填，需要使用的 JS 接口列表
                    });

                    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                        wx.updateAppMessageShareData({
                            title:title, // 分享标题
                            //desc: info.title, // 分享描述
                            desc: "扣时事，跟热点，日更新", // 分享描述
                            link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 设置成功
                            }
                        })
                        wx.onMenuShareAppMessage({
                            title:title, // 分享标题
                            //desc: info.title, // 分享描述
                            desc: "扣时事，跟热点，日更新", // 分享描述
                            link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 设置成功
                            }
                        })
                        wx.updateTimelineShareData({
                            title:title, // 分享标题
                            link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 设置成功
                            }
                        })

                        wx.onMenuShareTimeline({
                            title:title, // 分享标题
                            link: shareUrl,
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 用户点击了分享后执行的回调函数
                            }
                        })
                        wx.onMenuShareWeibo({
                            title: title, // 分享标题
                            //desc: info.title, // 分享描述
                            desc: "扣时事，跟热点，日更新",
                            link: shareUrl, // 分享链接
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });
                        wx.onMenuShareQQ({
                            title: title, // 分享标题
                            desc: "扣时事，跟热点，日更新",
                            //desc: info.title, // 分享描述
                            link: shareUrl, // 分享链接
                            imgUrl: icon, // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                            }
                        });

                    });
                })
            }

        },
        mounted: function () {
          // this.wxShareInit()
        }
    };
</script>
<style lang="less">
    .home {
        padding: 0px 2%;
        .pc-tips{
            margin-top: 10px;
        }
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 0px;
        /*height: 150px;*/
        max-height: 300px;
        text-align: center;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .chanenl-recommend {
        margin-top: 10px;
    }

    .notice {
        margin-top: 10px;
    }

    .tips-box {
        margin-top: 10px;

        .tips-box-con {
            .active {
                color: #1AA97B;
            }
        }
    }


</style>
